// 项目定位

<template>
    <f7-page class="positioning">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>项目定位</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>
        <div class="content">
            <div class="search-bar">
                <div class="search-left">
                    <f7-list inset>
                        <f7-list-input :value="addressName"
                                       @input="addressName = $event.target.value"
                                       type="text"
                                       placeholder="请输入地址"
                                       clear-button>
                        </f7-list-input>
                    </f7-list>
                    <div @click="searchQuery">
                        <f7-icon slot="media"
                                 f7="search"></f7-icon>
                    </div>
                </div>
            </div>

            <div class="map-box">
                <div class="zoom-box">
                    <div @click="zoom ++">
                        <f7-icon f7="plus"></f7-icon>
                    </div>
                    <div @click="zoom --">
                        <f7-icon f7="minus"></f7-icon>
                    </div>
                </div>

                <div @click="location"
                     class="current-position">
                    <f7-icon f7="scope"></f7-icon>
                </div>
            </div>
        <tdt-map :center="center" :zoom="zoom" class="bm-view"  @init="init">
          <tdt-marker
          @dragend="dragend"
          :position="[position.lng,position.lat]"
          :dragging="!(pageAction == 'edit' && !controlData.isLocate)"
        ></tdt-marker>
        </tdt-map>
            <div class="record-box">
                <p>{{models.model.engineePosition}}<span v-if="pageAction == 'edit' && !controlData.isLocate"
                          class="tag">审核中</span></p>
                <!-- <f7-button fill
                           icon-f7="square_favorites"
                           @click="fnRecord()">定位记录</f7-button> -->
                <div class="btn-box">
                    <f7-button v-has="`project:position:save`"
                               @click="create"
                               v-if="pageAction == 'create'"
                               round
                               fill>提交</f7-button>
                    <template v-else-if="pageAction == 'edit' && controlData.isLocate">
                        <f7-button round
                                   fill
                                   class="bg-btn"
                                   @click="fnRecord()">定位记录</f7-button>
                        <f7-button v-has="`project:position:save`"
                                   round
                                   fill
                                   @click="update">确认并更新</f7-button>
                    </template>
                </div>
            </div>
        </div>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"
export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/project/position/getWorkflowViewModel',
        }
    }
    onInit () {
        this.context.engineeId = this.$params.engineeId
    }
    onAfterQuery (type, isSuccess, result) {
        this.context.pageAction = result.pageAction
        if (result.pageAction == 'create') {
              //系统第一次新增时，若工程已有位置，则按照工程现有的位置进行显示
            if(result.models.model.lngBd && result.models.model.latBd){
              this.context.models.model.engineePosition = result.models.model.engineePosition
              this.context.position = {lng:result.models.model.lngBd * 1,lat:result.models.model.latBd * 1 }
              this.context.center = [result.models.model.lngBd * 1,result.models.model.latBd * 1 ]
            }else {
              setTimeout(() => {
                this.vm.location()
              }, 50)
            }
        } else {
            this.context.models.model.engineePosition = result.models.model.engineePosition
            this.context.position = {lng:result.models.model.lngBd * 1,lat:result.models.model.latBd * 1 }
            // let point_center = new BMap.Point(this.context.position.lng, this.context.position.lat)
            // this.context.map.setZoom(12);
            // this.context.map.setCenter(point_center);
            this.context.center = [result.models.model.lngBd * 1,result.models.model.latBd * 1 ]
        }
        return result
    }
    onAfterSave (isSuccess, result) {
        if (isSuccess) {
            this.context.pageAction = 'edit'
            this.context.controlData.isLocate = false
        }
    }
    mixin () {
        return {
            data () {
                return {
                    //search-bar
                    addressName: '',
                    //baidu-map
                    map: '',
                    center: [ 114.39117, 30.6342 ],
                    zoom: 10,
                    position: {},
                    address: '',
                    district: '',
                    //controller
                    pageAction: '',
                    models: {
                        model: {
                            engineePosition: ''
                        }
                    },
                    controlData: {
                        workflow: {}
                    },
                    selectUser: {
                        selectComment: null,
                        comment: null,
                        comments: [],
                        tran: [],
                        activity: "",
                        users: [],
                    }
                }
            },
            created () {
                console.log(this.$store)
            },
            methods: {
              init(map){
            this.map = map
            let point_center = new T.LngLat(this.context.position.lng, this.context.position.lat)
            map.centerAndZoom(point_center, 14);
            let  marker = new T.Marker(point_center);
            map.addOverLay(marker)
              },
                //search-bar
                searchQuery () {
                    if (this.addressName) {
                        this.getPoint(this.addressName)
                    } else {
                        this.$f7.dialog.toast('请输入地址')
                    }
                },
                location () {
                    this.$f7.preloader.show();
                    this.$util.getCurrentPosition((pos) => {
                        this.position = {lng:pos.coords.longitude,lat:pos.coords.latitude}
                        this.center = [pos.coords.longitude ,pos.coords.latitude ]
                        // 原生处理定位
                        let point_center=  new T.LngLat(pos.coords.longitude,pos.coords.latitude)
                        this.map.centerAndZoom(point_center, 14);
                        let  marker = new T.Marker(point_center);
                        this.map.addOverLay(marker)
                        this.getAddress(point_center)
                        this.$f7.preloader.hide();
                    })
                },
                //baidu-map
                handler ({ BMap, map }) {
                    map.enableScrollWheelZoom(true);
                    // map.setMapStyle({
                    //     styleJson: styleJson
                    // });
                    this.map = map;
                },
                dragend (event) {
                    this.position = event.lnglat
                    this.getAddress(this.position)
                },
                getAddress (point) {
                    let ol = new T.Geocoder();
                    ol.getLocation(point, (pos) => {
                        this.district = pos.addressComponent.county
                        this.models.model.engineePosition = pos.formatted_address
                    })
                },
                getPoint (address) {
                  let ol = new T.Geocoder()
                  ol.getPoint(address, (pos) => {
                        if (pos) {
                            this.position = {lng:pos.location.lon,lat:pos.location.lat}
                            this.center = [pos.location.lon,pos.location.lat]
                            // this.map.setZoom(12);
                            // this.map.setCenter(pos);
                            let point_center=  new T.LngLat(pos.location.lon,pos.location.lat)
                            this.getAddress(point_center)
                        } else {
                            this.$f7.dialog.toast('未查询到该地址')
                        }
                    })
                },
                // 记录
                fnRecord () {
                    this.$f7router.navigate(`/business/construction/enginee/positioning/record?engineeId=${this.engineeId}`)
                },
                //controller
                create () {
                    this.models.model.latBd = this.position.lat
                    this.models.model.lngBd = this.position.lng
                    console.log(this.controlData)
                    this.send()
                },
                update () {
                    this.models.model.latBd = this.position.lat
                    this.models.model.lngBd = this.position.lng
                    this.$util.getPromise(`/project/position/getWorkflowViewModel?action=processStart&appCode=positionCase`, { engineeId: this.engineeId }).then(result => {
                        result.models.model.latBd = this.models.model.latBd;
                        result.models.model.lngBd = this.models.model.lngBd;
                        result.models.model.engineePosition = this.models.model.engineePosition;
                        this.pageAction = 'create'
                        this.models.model = result.models.model;
                        this.send();
                    })
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";
.positioning {
    .content {
        height: 100%;
        display: flex;
        flex-direction: column;

        @{deep} .search-bar {
            margin: 15px 10px;
            position: relative;
            z-index: 2;
            .search-left {
                display: flex;
                align-items: center;
                background-color: #fff;
                border-radius: 50px;
                padding: 0 10px;
                .icon {
                    color: #c5ccd6;
                }
            }
            .list.inset {
                flex: 1;
                margin: 0;
            }
            ul {
                flex: 1;
                .item-inner {
                    padding-top: 3px;
                    padding-bottom: 3px;
                    flex-direction: row;
                    align-items: center;
                    .input-clear-button::before {
                        width: 28px;
                        height: 28px;
                        margin-left: -14px;
                        margin-top: -16px;
                    }
                }
            }
        }

        .map-box {
            position: relative;
            z-index: 2;

            .zoom-box {
                position: absolute;
                right: 24px;
                top: 24px;
                display: flex;
                flex-direction: column;
                background: #fff;
                padding: 5px;
                border-radius: 4px;

                > div:first-of-type {
                    .f7-icons {
                        border-bottom: 1px solid #e3e5e9;
                    }
                }

                .f7-icons {
                    font-size: 28px;
                    padding: 10px 5px;
                }
            }

            .current-position {
                position: absolute;
                right: 24px;
                top: 157px;
                background-color: #fff;
                padding: 10px;
                border-radius: 100%;

                .f7-icons {
                    font-size: 28px;
                }
            }
        }
        .bm-view{
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
        .record-box {
            flex-shrink: 0;
            padding: 20px 10px 15px;
            border-radius: 10px 10px 0 0;
            overflow: hidden;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;

            > p {
                margin: 0 0 15px;
                line-height: 32px;
                font-size: 18px;
                color: #0f1826;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
            }

            .btn-box {
                display: flex;
                gap: 15px;
                > a {
                    flex: 1;
                }
                .bg-btn {
                    background-color: rgba(51, 133, 255, 0.2);
                    color: #3385ff;
                }
            }
        }

        #mapContainer {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
}
</style>
